<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="backNav()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 卡密记录</text>
		</view>

		<view class="bg " :style="{ '--bg-image': `url(${ withdrawalBg})` }" @click="forgotPassword()">
			<view class="flex-end" style="width: 100%;">
				<view class="modifyPassword flex margin-top_20rpx">
					<image class="imgPass" :src="groupEditPasswordSix" mode=""></image>
					<text style="font-size: 25rpx;">修改密码</text>
				</view>
			</view>
			<view class="flex" style="height: 80%;">
				
				<view>

					<view class="detailsContainer flex-between  margin-top_20rpx">

						<block v-for="(i, j) in integralStatList" :key="j">
							<view class="flex-column v-price" @click="toGo(i.url)">
								<view style="color: #ffffff;">{{ i.num }}</view>
								<text
									style="font-size: 24rpx;color: rgba(255, 255, 255, 0.71); margin-top: 10rpx;">{{ i.title }}</text>
							</view>

						</block>

					</view>
				</view>

			</view>
			<!-- <image src="/static/detail/组合 3027.png" mode=""></image> -->
		</view>

		<view class="flex-between margin-top_40rpx">
			<view class="v-title flex-align-center">
				<text></text>
				<view>卡密列表</view>
			</view>
			<picker mode="selector" @change="bindPickerChange2" :data-userId="item.id" :range="groupList"
				:range-key="'groupName'">
				<view class="">
					<text style="font-weight: bold;">{{typeTitle}}</text>
					<uni-icons style="margin-left: 5rpx;font-weight: bold " color="#333333" type="down"
						size="18"></uni-icons>
				</view>
			</picker>
		</view>

		<mescroll-body ref="mescrollRef " @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
			@up="upCallback">
			<view class="passwordList flex-columns margin-top_40rpx" v-for="(item,index) in cardLogList" :key="index">
				<view class="flex-between ">
					<view class="font-weight_bold font-size_30rpx flex-start-center">
						<view :class="item.type==1?'typeClass':'type'">
							<text style="font-size: 24rpx;">{{ item.type==1? '套餐 ' :'加油包'}}</text>
						</view>
						<view class="margin-left_16rpx">
							{{item.name}}
						</view>
					</view>
					<view class="" style="color: #2476ED;font-size: 24rpx;">
						{{item.quantity}}/数量
					</view>
				</view>
				<view class="flex-between ">
					<view class="" style="font-size: 24rpx;">
						已激活:<text style="color: #FF0000;">{{item.used}}</text>
					</view>
					<view class="" style="font-size: 24rpx;">
						未激活:<text style="color:  #2476ED;">{{item.unused}}</text>
					</view>
					<view class="flex-between" style="font-size: 24rpx;" @click="viewCardPassword(item)">
						<text style="color: 333333;font-size: 24rpx;"> 查看卡密</text>
						<uni-icons style="margin-top: 7rpx;" color="#333333" type="right" size="14"></uni-icons>
					</view>
				</view>
			</view>
		</mescroll-body>
		
		
		<sunui-popup ref="titlePopup">
			<template v-slot:content>
		
				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">
		
						</view>
						<text>修改密码</text>
						<uni-icons @click='closeWriteOffTitle()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>
		
					<view class="card margin-bottom_50rpx">
						<view class="myNmae">
							<view class="">
								<input class="uni-inputsa" type="number" v-model="modPasswords" placeholder="请输入需修改的密码" />
							</view>
		
							<view class="">
								<input class="uni-inputsa" type="number" v-model="modPassword" placeholder="请再次输入需修改的	密码" />
							</view>
		
		
						</view>
		
					</view>
		
					<view class="PublishTags flex" @click="payNowTitle()">
						确定
					</view>
		
				</view>
		
			</template>
		</sunui-popup>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTop: '',
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				withdrawalBg: 'https://tuanma.weijuyunke.cn/index/images//detail/Rectangle2781.png',
				integralStatList: [

				],
				groupEditPasswordSix:this.$imgs.groupEditPasswordSix,
				modPassword:'',
				modPasswords:'',
				selLabel: 0,
				cardLogList: [],
				groupList: [{
						id: 0,
						groupName: '全部'

					}, {
						id: 1,
						groupName: '套餐'

					},
					{
						id: 2,
						groupName: '加油包'

					}
				],
				type:0,
				typeTitle:'全部类型'

			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.cardStatisFn()
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {


		},
		methods: {
			
			
			forgotPassword(){
				
				this.$refs.titlePopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: false, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});
				
				
			},
			async payNowTitle(){
				if (!this.modPassword) {
					this.$sun.toast('请输入修改的密码', 'none')
					return
				} else if(this.modPassword!=this.modPasswords){
					this.$sun.toast('二次输入的密码不正确', 'none')
					return 
				}else {
					
					
					
					const result = await this.$http.post({
						url: this.$api.passwordSet,
						data: {
							// 用户id
							
							partner_id: uni.getStorageSync('partner_id'),
						    password:this.modPassword
					
					
					
					
						}
					});
					if (result.errno == 0) {
					   this.$sun.toast('修改成功', 'none')
						
					   this.$refs.titlePopup.close()
					   setTimeout(()=>{
						   this.$sun.navTo('/pages/contactUs/managementLogin')
					   },1000)
					   
					}else{
						this.$sun.toast(result.message, 'none')
					}
				    
					
				
				}
			},
			closeWriteOffTitle(){
				 this.$refs.titlePopup.close()
			},
			
			async upCallback(scroll) {

				const result = await this.$http.get({
					url: this.$api.cardLogList,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						partner_id: uni.getStorageSync('partner_id'),
						page: scroll.num,
						psize: 10,
						type:this.type?this.type:0




					}
				});
				if (result.errno == 0) {

					this.mescroll.endByPage(result.data.list.length, result.totalPage);
					if (scroll.num == 1) this.cardLogList = [];
					this.cardLogList = this.cardLogList.concat(result.data.list);
					console.log(this.cardLogList)

				}
			},
			backNav() {
				this.$sun.navBack()
			},
			viewCardPassword(item) {
				this.$sun.navGo('/pages/contactUs/CardPasswordDetails', {
					info: JSON.stringify(item)
				})
			},
			bindPickerChange2(e){
				console.log(e)
				this.type=e.detail.value
				this.typeTitle=this.groupList[e.detail.value].groupName
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})
				
			},
			async cardStatisFn() {
				const result = await this.$http.get({
					url: this.$api.cardStatis,
					data: {
						partner_id: uni.getStorageSync('partner_id')
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					this.integralStatList = [


						{
							num: result.data.cardAll,
							title: '累计卡密'

						},
						{
							num: result.data.cardUsed,
							title: '已激活'

						},
						{
							num: result.data.cardUnused,
							title: '未激活'

						}
					]
				} else {
					this.$sun.toast(result.message, 'none')
				}
			}


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 20rpx;

		.v-title {
			// margin-top: 30rpx;
			// padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #2476ED;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.passwordList {
			height: 166rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			background: rgb(255, 255, 255);

			.typeClass {
				border-radius: 8rpx;
				padding: 5rpx 10rpx;

				color: #fff;

				background: rgb(24, 144, 255);
			}

			.type {
				border-radius: 8rpx;
				padding: 5rpx 10rpx;

				color: #fff;

				background: rgb(255, 157, 0);
			}
		}
		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;
		
			height: auto;
			overflow-x: auto;
		
			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;
		
		
				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}
		
			.myNmae {
		
				background-color: #fff;
				min-width: 50rpx;
		
				.avatar {
					width: 84rpx;
					height: 84rpx;
				}
		
				input {
					text-align: left;
				}
		
				.uni-input {
		
					height: 100rpx;
				}
		
				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}
		
				.uni-inputs {
					text-align: left !important;
				}
		
				.backgroundImg {
		
					height: 154rpx;
		
		
				}
		
			}
		
		
		
		
		
			.top {
				padding: 30rpx 0;
				width: 100%;
		
				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}
		
		}

		.bg {
			margin-top: 30rpx;
			background-repeat: no-repeat;
			height: 270rpx;
			border-radius: 20rpx;
			padding: 12rpx;
			background-image: (var(--bg-image));
			background-size: cover;
			.modifyPassword{
				/* 矩形 6353 */
				width: 166rpx;
				height: 50rpx;
				border-radius: 130rpx;
				color: #fff;
				
				background: rgba(0, 108, 186, 0.26);
				.imgPass{
					/* 修改 1 */
				width: 24rpx;
				height: 24rpx;
				}
			}


			.withdrawalBtn {
				border-radius: 200rpx;
				width: 142rpx;
				height: 68rpx;
				color: #2870FE;
				background: rgb(255, 255, 255);
			}

			.detailsContainer {
				width: 642rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;

				.v-price {
					color: #fff;
					// margin-bottom: 48rpx;
					width: calc(100% / 3);

					view {
						color: #fff;
						font-size: 30rpx;
						margin-bottom: 10rpx;
					}
				}

			}
		}
	}
</style>